<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="90px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="公告标题" prop="title">
            <el-input
              v-model="form.title"
              placeholder="请输入公告标题"
              :maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" size="medium" @click="handleUpdate"
              >保存修改</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" />

      <el-row>
        <mavon-editor ref="md" v-model="form.content" @imgAdd="addImg" />
      </el-row>
    </el-form>
  </div>
</template>

<script>
// import { listAllCategory } from '@/api/category';
import {
  uploadImg,
  updateAnnouncement,
  getAnnouncement,
} from "@/api/info/announcement";
// import { addArticle, getArticle, updateArticle } from '@/api/article';
export default {
  name: "Write",
  data() {
    return {
      form: {
        title: "",
        thumbnail: "",
        isTop: "1",
        isComment: "0",
        content: "",
      },
      categoryList: [],
      aId: -1,
      fileList: [],
      announcement: [],
      id: this.$route.query.id,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.aId = route.query && route.query.id;
        console.log(this.aId);
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    handleUpdate() {
      updateAnnouncement(this.form).then((response) => {
        alert("修改公告成功");
        // this.$modal.msgSuccess('保存草稿成功');
      });
    },
    // 绑定@imgAdd event
    addImg(pos, file) {
      // 第一步.将图片上传到服务器.
      uploadImg(file)
        .then((response) => {
          this.$refs.md.$img2Url(pos, response);
        })
        .catch((error) => {
          this.$message.error(error.msg);
        });
    },
  },
  created() {
    //生命周期函数
    getAnnouncement(this.id).then((response) => {
      this.form = response;
    });
  },
};
</script>
<style scoped>
.el-col .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;

  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.app-container {
  margin: 20px;
}
</style>
